<!--
 * Tencent is pleased to support the open source community by making 蓝鲸 available.
 * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company. All rights reserved.
 * Licensed under the MIT License (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 * http://opensource.org/licenses/MIT
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
 * either express or implied. See the License for the specific language governing permissions and
 * limitations under the License.
-->

<template>
  <bk-select v-if="display === 'selector'"
    searchable
    :readonly="readonly"
    :disabled="disabled"
    :placeholder="$t('请选择xx', { name: $t('资源类型') })"
    v-model="selected">
    <bk-option id="host" :name="$t('主机')"></bk-option>
  </bk-select>
  <span v-else>{{getResourceInfo()}}</span>
</template>

<script>
  export default {
    name: 'task-resource-selector',
    props: {
      display: {
        type: String,
        default: 'selector'
      },
      readonly: Boolean,
      disabled: Boolean,
      value: {
        type: [String, Number]
      }
    },
    data() {
      return {
        resources: [{
          id: 'host',
          name: this.$t('主机')
        }]
      }
    },
    computed: {
      selected: {
        get() {
          return this.value
        },
        set(value, oldValue) {
          this.$emit('input', value)
          this.$emit('change', value, oldValue)
        }
      }
    },
    methods: {
      getResourceInfo() {
        const resource = this.resources.find(resource => resource.id === this.value)
        return resource ? resource.name : '--'
      }
    }
  }
</script>
